<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:300px;
            width: 200px;
            background: pink;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
               使用bind()给div绑定事件
               第一个参数：表示要绑定的事件名称（可以有多个）
               第二个参数：表示事件处理函数

               优势：可以同时绑定多个事件
               缺点：要绑定事件的元素必须存在在文档中，不能是动态创建出来的
             */
            /*$("div").bind("click mouseenter mouseleave",function(){
                console.log($(this).height());
            })*/

            /*$("div").bind({
                "click":function(){
                  console.log("click");
                },
                "mouseenter":function(){
                    console.log("mouseenter");
                },
                "mouseleave":function(){
                    console.log("mouseleave");
                }
            })*/

            $("p").click(function(){
                alert("这是页面中存在的");
            })
            $("#btn").click(function(){
                $("div").html("<p>这是动态创建的</p>")
            })
        })
    </script>
</head>
<body>
  <p>这是页面中存在的p</p>
  <button id="btn">创建p</button>
   <div></div>
</body>
</html>